import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import DATA from '../../../data/data-1.json';
import {Adc, AdcCheck, AdcIndex, AntdTable, Button, ButtonGroup, Checkbox} from "../../../../packages";

export const demo1 = designPage(() => {

  const data = DATA.slice(0, -2);
  const summaryData = DATA.slice(DATA.length - 2);

  const state = reactive({
    checked: null as any,
    toggleOnClickRow: false,
  });

  return () => (
    <DemoRow title="单选">
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label={!!state.checked ? `已选中:${state.checked.name}` : '未选中节点'}/>
        <Button label="选中第三条数据" onClick={() => state.checked = data[2]}/>
        <Button>
          <Checkbox v-model={state.toggleOnClickRow} label="点击行的时候选中"/>
        </Button>
      </ButtonGroup>
      <AntdTable
        dataSource={data}
        summaryDataSource={summaryData}
        showRows={10}
      >
        <AdcCheck dataIndex="id" v-model={state.checked} toggleOnClickRow={state.toggleOnClickRow} multiple={false}/>
        <Adc dataIndex="id" title="编号"/>
        <Adc dataIndex="size" title="大小"/>
        <Adc dataIndex="name" title="名称"/>
        <Adc dataIndex="date" title="日期"/>
        <Adc dataIndex="color" title="颜色"/>
        <Adc dataIndex="star" title="评分"/>
      </AntdTable>
    </DemoRow>
  );
});


export const demo2 = designPage(() => {

  const data = DATA.slice(0, -2);
  const summaryData = DATA.slice(DATA.length - 2);

  const state = reactive({
    checked: null as any,
    toggleOnClickRow: true,
  });

  return () => (
    <DemoRow title="多选">
      <ButtonGroup style={{ margin: '4px 0' }}>
        <Button label={!!state.checked ? `已选中:${state.checked?.map((i: any) => i.name).join(',')}` : '未选中节点'}/>
        <Button label="选中第三条数据" onClick={() => state.checked = [data[2]]}/>
        <Button>
          <Checkbox v-model={state.toggleOnClickRow} label="点击行的时候选中"/>
        </Button>
      </ButtonGroup>
      <AntdTable
        dataSource={data}
        summaryDataSource={summaryData}
        showRows={10}
      >
        <AdcCheck dataIndex="id" v-model={state.checked} toggleOnClickRow={state.toggleOnClickRow}/>
        <AdcIndex/>
        <Adc dataIndex="id" title="编号"/>
        <Adc dataIndex="size" title="大小"/>
        <Adc dataIndex="name" title="名称"/>
        <Adc dataIndex="date" title="日期"/>
        <Adc dataIndex="color" title="颜色"/>
        <Adc dataIndex="star" title="评分"/>
      </AntdTable>
    </DemoRow>
  );
});
